import React from 'react'
import { AutoComplete, Button, Icon, Input, Modal, Transfer, message, Tooltip, Col, Row } from 'antd'
import { FormattedMessage } from 'react-intl'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { convertContent } from '../../../../constant/lang-util'

export default class SearchToolPane extends React.Component {
  state = {
    visible: false
  }

  handleChange (nextTargetKeys, direction, moveKeys) {
    const {user, programId} = this.props
    if (direction === 'right') {
      this.props.batchFollow(programId, user.id, moveKeys.join(','))
    } else {
      this.props.batchUnFollow(programId, user.id, moveKeys.join(','))
    }
  }

  encrypt (tutorId, programId) {
    return this.hashCode(`${tutorId}`) + programId + '.' + `${tutorId}${tutorId}${tutorId}` + '.' + programId
  }

  hashCode (str) {
    let h = 0
    let off = 0
    let len = str.length
    for (let i = 0; i < len; i++) {
      h = 31 * h + str.charCodeAt(off++)
    }
    return h + ''
  }


  copyInviteLink () {
    let {settings, programId, user} = this.props
    const code = this.encrypt(user.id, programId)
    const context = settings.appContextPath === '/learn' ? '' : 'staging.'
    const link = `http://${context}school.thoughtworks.cn/learn/program-center/student/index.html#/programs/followers/links?code=${code}`
    return link
  }

  render () {
    const {options, search, followUser, myStudents, students, programId, user} = this.props
    const {visible} = this.state
    const transferDataSource = students.map(item => {
      const {id, name, username} = item
      return {key: id, name: name || username}
    })
    const transferTargetKeys = myStudents.map(item => item.student.id)
    return <div>
      <span className='follow'> <FormattedMessage id='我的关注'/></span>
      <Button type='dashed'
              size='large'
              className='batch-btn'
              onClick={() => window.location.href = `/learn/program-center/api/myStudents/tutors/${user.id}/programs/${programId}/exportExcel`}>
        <Icon type="download" /><FormattedMessage id='导出总积分'/>
      </Button>
      <CopyToClipboard text={this.copyInviteLink()}
                       onCopy={() => message.success(convertContent('复制成功'))}>
        <Tooltip title={<FormattedMessage id='通过学员访问邀请链接来关注学员'/>}>
          <Button type='dashed'
                  size='large'
                  className='batch-btn'>
            <FormattedMessage id='邀请链接'/>
          </Button>
        </Tooltip>
      </CopyToClipboard>

      <Button type='dashed'
              size='large'
              className='batch-btn'
              onClick={() => this.setState({visible: true})}>
        <FormattedMessage id='批量添加'/>
      </Button>


      <AutoComplete
        className='search-input'
        size='large'
        dataSource={options}
        backfill
        onSearch={search}
        onSelect={followUser}
        placeholder={<FormattedMessage id='请输入组员的用户名或邮箱进行关注'/>}
        optionLabelProp='text'
        style={{border: '1px solid #1973ba'}}
      >
        <Input suffix={(<Icon type='search'/>)}/>
      </AutoComplete>

      <Modal
        width={580}
        visible={visible}
        title={<FormattedMessage id='批量添加'/>}
        footer={null}
        onCancel={() => this.setState({visible: !visible})}>
        <Transfer
          className='transfer-modal'
          showSearch
          dataSource={transferDataSource}
          operations={[<FormattedMessage id='添加'/>, <FormattedMessage id='移除'/>]}
          targetKeys={transferTargetKeys}
          render={item => item.name}
          onChange={this.handleChange.bind(this)}
        />
      </Modal>

    </div>
  }
}
